<template>
	<!-- 账套管理 -->
	<div style="height:3000px">
		<v-card>
			<v-card-title>
				<v-btn class="ml-2" small tile color="primary" @click="editAccountBookDialog=true">
					创建账套
				</v-btn>

				<v-divider class="mx-4" inset vertical></v-divider>

				<v-row class="mt-2">
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="账套名称" v-model="accountBookQuery.code" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="账套代码" v-model="accountBookQuery.name" dense outlined>
						</v-text-field>
					</v-col>
					<v-col>
						<v-btn color="primary" @click="search">查询</v-btn>
						<v-btn class="ml-3" depressed color="primary" @click="refreshApps">
							刷新</v-btn>
					</v-col>
				</v-row>
			</v-card-title>
			<v-card-text>
				<v-data-table :headers="accountBookHeaderList" :items="accountBookDataList" small fixed-header
					item-key="id" dense class="text-no-wrap" loading-text="正在加载请稍等......" :loading="accountBookLoading"
					:options.sync="accountBookOptions" :footer-props="vuetifyDefaultPage"
					:server-items-length="accountBookTotalCount">
					<template v-slot:item.actions="{ item }">
						<div>
							<v-btn class="ml-2" small tile color="primary"
								@click="editAccountBookDialog=true,accountBookModel=item">
								编辑
							</v-btn>
					<!-- 		<v-btn class="ml-2" small tile color="red" @click="deleteAccountBookClick(item)">
								删除
							</v-btn> -->
						</div>
					</template>
				</v-data-table>
			</v-card-text>
		</v-card>

		<v-dialog v-model="editAccountBookDialog" width="400">
			<v-card>
				<v-card-title>编辑账套</v-card-title>
				<v-card-text>
					<v-text-field label="账套代码" v-model="accountBookModel.code"
						:disabled="accountBookModel.id!==undefined" dense>
					</v-text-field>
					<v-text-field label="账套名称" v-model="accountBookModel.name" dense>
					</v-text-field>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="success" class="mr-4" text @click="editAccountBookSubmit">确认</v-btn>
					<v-btn color="warning" class="mr-4" text @click="close">取消</v-btn>

				</v-card-actions>
			</v-card>
		</v-dialog>
	</div>
</template>

<script>
	export default {
		name: 'accountbook_manager',
		components: {

		},
		data: () => ({
			accountBookQuery: {
				code: '',
				name: '',
			},
			accountBookHeaderList: [{
					text: '操作',
					align: 'center',
					value: 'actions',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '账套代码',
					align: 'center',
					value: 'code',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '账套名称',
					align: 'center',
					value: 'name',
					filterable: false,
					class: 'fixed'
				},

			],
			accountBookDataList: [],
			accountBookTotalCount: 0,
			accountBookLoading: true,
			accountBookOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
				// 'items-per-page-all-text': '100'
			},
			editAccountBookDialog: false,
			accountBookModel: {}
		}),
		watch: {
			accountBookOptions: {
				handler() {
					this.search()
				},
				deep: true
			},
		},
		methods: {
			async search() {
				this.accountBookLoading = true
				var response = await this.$httpRequest({
					url: `SPM/AccountBook/LoadPage?code=${this.accountBookQuery.code}&name=${this.accountBookQuery.name}&
						pageNumber=${this.accountBookOptions.page}&
						pageSize=${this.accountBookOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.accountBookDataList = response.data.result
					this.accountBookTotalCount = response.data.pagination.totalRecords
					this.accountBookLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
			async refreshApps() {
				this.accountBookQuery.code = ''
				this.accountBookQuery.name = ''
				await this.search()
			},
			async editAccountBookSubmit() {
				var url = ''
				if (this.accountBookModel.id != undefined && this.accountBookModel.id > 0) {
					url = `SPM/AccountBook/EditAccountBook`
				} else {
					url = `SPM/AccountBook/AddAccountBook`
				}
				var response = await this.$httpRequest({
					url: url,
					method: 'post',
					data: this.accountBookModel
				})

				if (response.status == 1) {
					this.$message.success(response.info)
					this.close()
					await this.search()
				} else {
					this.$message.error(response.info)
				}
			},
			close() {
				this.accountBookModel = {}
				this.editAccountBookDialog = false
			},
			async deleteAccountBookClick(item) {
				var response = await this.$httpRequest({
					url: `SPM/AccountBook/DeleteAccountBook/${item.id}`,
					method: 'delete'
				})
				if (response.status == 1) {
					this.$message.success(response.info)
					this.search()
				} else {
					this.$message.error(response.info)
				}
			},
		},

	}
</script>

<style>
</style>
